<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=yes">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>jQuery手机注册表单获取验证码代码 - 站长素材</title>
    <!-- Bootstrap core CSS-->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">


    <script src="/jquery-2.1.1.min.js"></script>
    <script src="/layer/layer.js"></script>
    <script type="text/javascript">
        var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手机号正则
        var emailReg=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
        var count = 60; //间隔函数，1秒执行
        var InterValObj1; //timer变量，控制时间
        var curCount1;//当前剩余秒数
        function SetRemainTime1() {
            if (curCount1 == 0) {
                window.clearInterval(InterValObj1);//停止计时器
                $("#btnSendCode1").removeAttr("disabled");//启用按钮
                $("#btnSendCode1").val("重新发送");
            }
            else {
                curCount1--;
                $("#btnSendCode1").val( + curCount1 + "秒再获取");
            }
        }
        /*提交*/
        function register(){
            curCount1=count;
            var phone = $.trim($('#phone1').val());
            var email=$.trim($('#code1').val());
            if (!emailReg.test(email)) {
                layer.msg("请输入有效的邮箱",{
                    time: 1000,
                })
                return false;
            }
            if (!phoneReg.test(phone)) {
                layer.msg("请输入有效的手机号码",{
                    time: 1000,
                })
                return false;
            }

            $.ajax({
                url:"../register/userRegister",
                data:{phone:phone,email:$("#code1").val()},
                success:function (result) {
                    if(result=="1"){
                        //设置button效果，开始计时
                        $("#btnSendCode1").attr("disabled", "true");
                        $("#btnSendCode1").val( + curCount1 + "秒再获取");
                        InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
                        //向后台发送处理数据
                        layer.msg("发送验证码成功，请前往邮箱查看验证码",{
                            time: 1000,
                        })
                    }else if(result=="2"){
                        layer.msg("发送验证码失败",{
                            time: 1000,
                        })
                    }else if(result=="3"){
                        layer.msg("手机号已经被注册过了，请前往登陆",{
                            time: 1000,
                        })
                    }
                }
            })
        }
        function gotoLogin() {
            location.href="../view/toView?address=phoneLogin";
        }
        function zhuCe() {

            curCount1=count;
            var phone = $.trim($('#phone1').val());
            var email=$.trim($('#code1').val());
            if (!emailReg.test(email)) {
                layer.msg("请输入有效的邮箱",{
                    time: 1000,
                })
                return false;
            }
            if (!phoneReg.test(phone)) {
                layer.msg("请输入有效的手机号码",{
                    time: 1000,
                })
                return false;
            }

            $.ajax({
                url:"../register/userZhuCe",
                data:{code:$("#code").val(),phone:phone},
                success:function(result){
                    if(result=="1"){
                        layer.msg("验证码正确，注册成功,请前往登录",{
                            time: 1000,
                     });
                        gotoLogin();
                    }else if(result=="3"){
                        layer.msg("手机号已经被注册过了!",{
                            time: 1000,
                        })
                    }
                    else{
                        layer.msg("信息有误，请重新输入",{
                            time: 1000,
                        })
                    }
                }
            })
        }
    </script>
</head>
<body >
 <center>
<div class="modal_content">
    <h5>请注册！</h5>
    <div>
        <label for="phone1">手机号：</label><br />
        <input id="phone1" type="text" autocomplete="off" placeholder="请输入手机号">
    </div>
    <div>
        <label for="code1">邮箱：</label>
        <div class="code1">
            <input id="code1" type="text" autocomplete="off" placeholder="请输入邮箱">
        </div>
    </div>
    <div>
        <label for="code">验证码：</label>
        <div class="code">
            <input id="code" type="text" autocomplete="off">
            <input id="btnSendCode1" type="button" class="btn btn-default" value="获取验证码" onClick="register()" />
        </div>
    </div>
    <div class="next">
        <button onClick="gotoLogin()">去登录</button>
        <button onClick="zhuCe()">注册</button>
    </div>
</div>
 </center>
</body>
</html>